<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域插槽2--这里好像可以通过插槽对父组件传值</title>
    <script src="../public/vue2.7.14-dev.js"></script>
</head>
<body>
    <div id="app">
        <current-user>
            <!-- 这里其实在讲你想要父组件或者是子组件的数据填充到这个插槽中 -->
            <!-- 这里的值是由子组件传上来的,但是好像也不能用在父组件上广泛运用哦！ -->
            <template v-slot:default="slotProps">
                {{ slotProps.user.firstName }} --
                {{slotProps.user.lastName}}
              </template>
        </current-user>
    </div>

    <!-- 
    作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：
function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。
所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>
     -->

    
    <script>
    Vue.component('current-user',{
        template:`
        <span>
            <slot :user="user">快快快</slot>
        </span>
        `,
        data(){
            return {
                user:{
                    firstName:"luo",
                    lastName:'yu'
                }
            }
        }
    })

    new Vue({
        el:'#app',
    })
</script>
</body>
</html>